<template>
  <div class="userManage">
    <div class="topHandleCon">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-row
            :gutter="10"
            class="noBorderSelect"
          >
            <el-col :span="11">
              <el-card :body-style="{padding:0}">
                <el-row>
                  <el-col :span="8">
                    <span class="spanBorder">用户类型</span>
                  </el-col>
                  <el-col :span="16">
                    <el-select
                      v-model="search.userType"
                      clearable
                      size="mini"
                      @change="searchFn(1)"
                    >
                      <el-option
                        v-for="item of userType"
                        :key="item.encode"
                        :value="item.encode"
                        :label="item.name"
                      />
                    </el-select>
                  </el-col>
                </el-row>

              </el-card>
            </el-col>
            <el-col :span="11">
              <el-card :body-style="{padding:0}">
                <el-row>
                  <el-col :span="8">
                    <span class="spanBorder">状态</span>
                  </el-col>
                  <el-col :span="16">
                    <el-select
                      v-model="search.status"
                      size="mini"
                      clearable
                      @change="searchFn(1)"
                    >
                      <el-option
                        v-for="item of stateType"
                        :key="item.encode"
                        :value="item.encode"
                        :label="item.name"
                      />
                    </el-select>
                  </el-col>
                </el-row>

              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col
          :span="14"
          class="greenBtnW"
        >
          <el-row :gutter="10">
            <el-col
              :span="11"
              class="txtR"
            >
              <search
                v-model="search.value"
                :show-btn="false"
                placeholder="用户账号/名称"
                @btnClick="searchFn(1)"
              />
            </el-col>
            <el-col
              :span="2"
              class="txtR"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="showAddUser('add')"
                >新增</div>
              </div>
            </el-col>
            <el-col
              :span="2"
              class="txtR"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="showAddUser('update')"
                > 修改</div>
              </div>
            </el-col>
            <el-col
              :span="2"
              class="txtR"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="deleteConfirm"
                >删除</div>
              </div>
            </el-col>
            <el-col
              :span="3"
              class="txtR"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="showAddUser('move')"
                >账号移交</div>
              </div>
            </el-col>
            <el-col
              :span="3"
              class="txtR"
            >
              <div>
                <div
                  class="greenBtn"
                  @click="showUserRule"
                >角色授权</div>
              </div>
            </el-col>

            <el-col
              :span="1"
              class="txtR"
            >
              <div class="fresh">
                <div @click="refresh"><i class="el-icon-refresh" /></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="tableCon">
      <div class="tableShadow">
        <el-table
          ref="multipleTable"
          :data="tableData"
          height="100%"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            width="80"
            header-align="center"
            align="center"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <el-checkbox
                v-model="checkedAll"
                :newname="scope.$index "
                @change="checkedAllFn"
              >序号 </el-checkbox>
            </template>
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="rowChange"
              >{{ scope.$index+1 }}</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in columnList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width||''"
            header-align="center"
            align="center"
          />
          <el-table-column
            header-align="center"
            label="用户类型"
            align="center"
          >
            <template slot-scope="scope">
              {{ userType.find(ty=>{
                return ty.encode===scope.row.userType
              })?userType.find(ty=>{
                return ty.encode===scope.row.userType
              }).name:'' }}

            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              {{ ['停用','启用'][scope.row.status] }}

            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="pageArea">
        <el-pagination
          :current-page.sync="pageindex"
          :page-sizes="[10, 20, 50]"
          :page-size="pagesize"
          :total="total"
          layout="total,sizes,prev,pager,next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-if="addUserShow"
      :close-on-click-modal="false"
      :title="addUserType==='add'?'新增用户':addUserType==='update'?'修改用户':'账号移交'"
      :visible.sync="addUserShow"
      custom-class="addUserCss"
      width="1100px"
      append-to-body
    >
      <add-user
        :info="userInfo"
        :table-data="tableData"
        :type="addUserType"
        @close="closeAdduser"
      />
    </el-dialog>
    <el-dialog
      v-if="userRuleShow"
      :close-on-click-modal="false"
      :visible.sync="userRuleShow"
      title="角色授权"
      custom-class="addUserCss"
      width="1000px"
      append-to-body
    >

      <user-rule :info="userInfo" />
    </el-dialog>

  </div>
</template>

<script>

import { getUserAdd, updateUsers, getUserList, deleteUsers } from '@/api/user/index'
import addUser from './addUser'
import userRule from './userRule'
import search from '@/components/searchInput'

export default {
  name: 'UserManage',
  components: {
    search,
    addUser,
    userRule
  },

  data() {
    return {
      userRuleShow: false, // 角色授权弹窗
      addUserShow: false,
      addUserType: 'add',
      userInfo: [], // 选中的数据
      search: {},
      userType: [
        // { encode: 0, name: '全部' },
        { encode: 1, name: '操作员' },
        // { encode: 2, name: '系统管理员' },
        { encode: 3, name: '平台管理员' },
        { encode: 4, name: '组织单元管理员' },
        { encode: 5, name: '组织管理员' }
      ],
      stateType: [
        // { encode: 5, name: '全部' },
        { encode: 1, name: '启用' },
        { encode: 0, name: '停用' }
      ],
      tableData: [], // 表格数据
      checkedAll: false, // 全选
      columnList: [
        {
          prop: 'account',
          label: '用户账号'
        },

        {
          prop: 'userName',
          label: '用户名称'
        },
        {
          prop: 'phone',
          label: '手机号'
        }

      ],
      pageindex: 1,
      pagesize: 10,
      total: 0
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    searchFn(pageindex) {
      const data = {
        [this.search.status !== 5 && 'status']: this.search.status,
        [this.search.value && 'userName']: this.search.value,
        // "order": "string",
        'current': pageindex || this.pageindex,
        'size': this.pagesize,
        // "sort": "string",
        'userType': this.search.userType
      }
      this.getData(data)
    },
    handleSizeChange(val) {
      this.pageindex = 1
      this.pagesize = val
      this.searchFn()
    },
    handleCurrentChange(val) {
      this.pageindex = val
      this.searchFn()
    },
    checkedAllFn(bool) { // 全选
      this.tableData.forEach(tab => {
        this.$set(tab, 'checked', bool)
      })
    },
    rowChange() { // 改变行
      this.checkedAll = this.tableData.every(table => {
        return table.checked
      })
    },
    // 角色授权
    showUserRule() {
      this.userInfo = []
      this.tableData.forEach(tab => {
        if (tab.checked) {
          this.userInfo.push(tab)
        }
      })
      if (this.userInfo.length === 0) {
        this.$msgBox.error('请选择要授权的用户!')
        return
      } else if (this.userInfo.length > 1) {
        this.$msgBox.error('请只选择一个要授权的用户!')
        return
      }
      this.userRuleShow = true
    },
    // 新增修改用户
    showAddUser(str) {
      this.addUserType = str
      this.userInfo = []
      if (str === 'update' || str === 'move') {
        this.tableData.forEach(tab => {
          if (tab.checked) {
            this.userInfo.push(tab)
          }
        })
        if (this.userInfo.length === 0) {
          this.$msgBox.error('请选择要修改的用户!')
          return
        } else if (this.userInfo.length > 1) {
          this.$msgBox.error('请只选择一个要修改的用户!')
          return
        }
      }
      this.addUserShow = true
    },
    // 完成新增修改用户
    closeAdduser(data) {
      if (!data) {
        this.addUserShow = false
        this.searchFn()
        return
      }
      const func = this.addUserType === 'add' ? getUserAdd : updateUsers
      func({ ...data }).then(res => {
        if (res.status) {
          this.$msgBox.show(this.addUserType === 'add' ? '新增用户成功!' : '修改用户成功!')
          this.addUserShow = false
          this.searchFn()
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error(this.addUserType === 'add' ? '新增用户失败!' : '修改用户失败!')
      })
    },
    // 删除确认
    deleteConfirm() {
      this.userInfo = []
      this.tableData.forEach(tab => {
        if (tab.checked) {
          this.userInfo.push(tab)
        }
      })
      if (this.userInfo.length === 0) {
        this.$msgBox.error('请选择要修改的用户!')
        return
      }
      this.$confirm('删除用户后，该账号将不能继续使用本系统进行业务操作，确定继续删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteUser(this.userInfo.map(info => info.phid))
        })
        .catch(err => { console.error(err) })
    },
    // 删除
    deleteUser(data) {
      deleteUsers(data).then(res => {
        if (res.status) {
          this.$msgBox.show('删除成功!')
          this.searchFn()
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error('删除失败!')
      })
    },
    refresh() {
      this.searchFn()
    },
    getData(data) {
      getUserList(data).then(res => {
        if (res.status) {
          this.tableData = res.data ? res.data.records : []
          this.tableData.forEach(item => {
            this.$set(item, 'checked', false)
          })
          this.checkedAll = false
          this.total = res.data.total
        } else {
          this.$msgBox.error(res.message)
        }
      }).catch(err => {
        console.log(err)
        this.$msgBox.error('获取用户列表失败!')
      })
    },
    handleSelectionChange() {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.userManage {
  min-width: 1250px;
  height: 100%;
  padding: 8px 0;
  overflow: hidden;
  position: relative;
}
.topHandleCon {
  padding: 0 20px;
  margin-top: 5px;
}
.noBorderSelect >>> .el-select {
  width: 100%;
  input {
    border: 0;
  }
}
.spanBorder {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 20px;
  margin-top: 4px;
  text-align: center;
  border-right: 1px solid $borderGray;
}
.greenBtnW {
  text-align: right;
  .greenBtn {
    margin: 0;
    min-width: 100%;
  }
  .fresh {
    height: 30px;
    line-height: 30px;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    color: #666;
  }
}
.tableCon {
  padding: 20px;
  padding-bottom: 70px;
  height: 100%;
  // position: relative;
  >>> .el-table--border {
    border: 0;
  }
  >>> .el-table::before {
    height: 0;
  }
  >>> .el-table::after {
    width: 0;
  }
  >>> .has-gutter tr > th:nth-last-of-type(2) {
    border-right: 0;
  }
}
.tableShadow {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-shadow: 0 0 5px 3px #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.pageArea {
  position: absolute;
  right: 90px;
  bottom: 5px;
}
</style>
<style lang="scss">
@import "@/styles/variables.scss";
.addUserCss {
  .el-dialog__header {
    background: $green;
    .el-dialog__title {
      color: #fff;
    }
  }
  border-radius: 10px;
  overflow: hidden;
}
</style>
